<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<html>
<head>
    <title>问卷列表</title>
    <style>
        .container { width: 90%; margin: 20px auto; }
        .header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 20px; 
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            margin: 5px;
            border-radius: 4px;
            text-decoration: none;
            color: white;
            cursor: pointer;
            border: none;
        }
        .btn-create { background-color: #4CAF50; }
        .btn-edit { background-color: #2196F3; }
        .btn-delete { background-color: #f44336; }
        .btn-view { background-color: #607d8b; }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th { background-color: #f5f5f5; }
        tr:hover { background-color: #f9f9f9; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>问卷列表</h2>
            <div>
                <span>欢迎, ${user.username}</span>
                <a href="${pageContext.request.contextPath}/logout" class="btn" style="background-color: #9e9e9e;">退出</a>
            </div>
        </div>

        <div>
            <a href="${pageContext.request.contextPath}/survey/create" class="btn btn-create">创建新问卷</a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${surveys}" var="survey">
                    <tr>
                        <td>${survey.title}</td>
                        <td>
                            <c:choose>
                                <c:when test="${survey.status == 0}">草稿</c:when>
                                <c:when test="${survey.status == 1}">已发布</c:when>
                                <c:when test="${survey.status == 2}">已结束</c:when>
                            </c:choose>
                        </td>
                        <td>
                            <fmt:formatDate value="${survey.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </td>
                        <td>
                            <a href="${pageContext.request.contextPath}/survey/detail/${survey.id}" class="btn btn-view">查看</a>
                            <c:if test="${survey.userId eq user.id}">
                                <a href="${pageContext.request.contextPath}/survey/edit/${survey.id}" class="btn btn-edit">编辑</a>
                                <button onclick="deleteSurvey(${survey.id})" class="btn btn-delete">删除</button>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>

    <script>
        function deleteSurvey(id) {
            if(confirm('确定要删除这个问卷吗？')) {
                fetch('${pageContext.request.contextPath}/survey/delete/' + id, {
                    method: 'POST'
                })
                .then(response => response.text())
                .then(result => {
                    if(result === 'success') {
                        window.location.reload();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        }
    </script>
</body>
</html>
    </script>

</body>
</html>
